<template>
  <div>
    <el-col :span="24" class="action-bar">
      <el-input clearable @clear="inputClear" placeholder="手机号" style="width:220px;margin-right: 8px"
                v-model="searchParams.phone"></el-input>
    </el-col>

    <el-table stripe :data="tableData" v-loading="tableLoadingShow" element-loading-text="加载中"
              style="width: 100%" class="el_table_style" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="用户昵称" prop="name"></el-table-column>
      <el-table-column label="头像" prop="img_url">
        <template slot-scope="scope">
          <img :src="scope.row.img_url" style="width: 60px;height: 60px;border-radius: 50%">
        </template>
      </el-table-column>
      <!--<el-table-column label="姓名" prop="name"></el-table-column>-->
      <el-table-column label="手机" prop="phone"></el-table-column>
      <el-table-column label="分销商等级" prop="distribution_name"></el-table-column>
      <el-table-column label="累计获得佣金" prop="total_money"></el-table-column>
      <el-table-column label="账号余额" prop="available_money"></el-table-column>
      <el-table-column label="绑定时间" prop="created_at"></el-table-column>
    </el-table>

    <div class="page-code" style="margin-top: 20px">
      <el-pagination
        background :current-page="searchParams.page" :page-size="searchParams.limit" layout="prev, pager, next" :total="pageTotal" @current-change="pageChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    props: {
      updateFlag: ''
    },
    data() {
      return {
        tableLoadingShow: false,
        searchParams: {
          page: 1,
          limit: 8,
          phone: ''
        },
        pageTotal: 0,
        tableData: []
      }
    },
    watch: {
      updateFlag(val){
        this.getDistributionNextUser()
      }
    },
    mounted() {

    },
    methods: {

      inputClear() {

      },

      //获取分销列表
      async getDistributionNextUser(){
        this.tableLoadingShow = true;
        let params = {
          limit: this.searchParams.limit,
          page: this.searchParams.page,
          user_id: this.$route.query.user_id
        }
        const res = await this.$api.getDistributionNextUser(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.tableData = list;
          this.pageTotal = res.data.page_info.total
        }else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow = false;
      },

      pageChange(e){
        this.searchParams.page = e
        this.getDistributionNextUser()
      }

    },
  }
</script>

<style scoped lang="scss">
  .action-bar{
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
</style>

<style scoped>
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table .warning-row {
    background: #f8f9fa;
  }

  /deep/.el-table .success-row {
    background: #ffffff;
  }
  /deep/.el_table_style{
    border: 1px solid #dee2e6;
  }
  /deep/.el-table td {
    border: none;
  }
</style>
